/<template>
  <!-- 微信小程序提交审核 -->
  <div
    class="content"
    style="position: relative;"
  >
    <div class="contentMain">
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        label-width="100px"
        label-position="top"
        class="formData"
      >
        <el-form-item
          label="选择合同或版本剧"
          prop="playlet_id"
        >
          <el-select
            v-model="formData.playlet_id"
            filterable
            remote
            clearable
            :disabled="row.id?true:false"
            placeholder="请选择"
            style="width: 100%;"
            @change="onGetCheckInfo"
          >
            <el-option
              v-for="(item, index) in optionsList.playlet_id"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="提审小程序"
          prop="mini_app_id"
        >
          <el-select
            v-model="formData.mini_app_id"
            clearable
            filterable
            remote
            style="width: 100%;"
            placeholder="请选择"
          >
            <el-option
              v-for="(item) in optionsList.mini_app_id"
              :key="item.id"
              :label="item.name"
              :disabled="item.app_type==2"
              :value="item.id"
              style="display: flex; align-items: center;"
            >
              <span style="float: left;margin-right:10px;">{{ item.name }}</span>
              <svg-icon
                v-if="item.app_type==1"
                style="float: right;"
                icon-class="miniapp"
                class="imageIcon"
              />
              <svg-icon
                v-else
                style="float: right;"
                icon-class="douyin"
                class="imageIcon"
              />
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="name">
          <template slot="label">
            <div>
              提审加急
              <el-tooltip
                class="item"
                effect="dark"
                placement="top"
              >
                <div slot="content">每个小程序，每天有5次加急机会。<br>该字段在首次提审时才有效，重新提<br>审时会沿用首次提审时的属性，重新<br>提审不会扣次数。</div>
                <i
                  class="el-icon-question"
                  style="cursor: pointer; width: 16px !important;"
                ></i>
              </el-tooltip>
            <!-- <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              content="每个小程序，每天有5次加急机会。该字段在首次提审时才有效，重新提审时会沿用首次提审时的属性，重新提审不会扣次数。"
            >

            </el-popover> -->
            </div>
          </template>
          <el-radio
            v-model="formData.expedited"
            :label="1"
          >加急</el-radio>
          <el-radio
            v-model="formData.expedited"
            :label="0"
          > 不加急</el-radio>
        </el-form-item>
        <el-form-item label="短剧名称">
          <el-input
            v-model="examineData.title"
            disabled
            clearable
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="制作方">
          <el-input
            v-model="examineData.producer"
            clearable
            disabled
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>

        <el-form-item :label="examineData.number_type == 1 ? '剧目备案号':'网络剧片发行许可证编号'">
          <el-input
            v-model="examineData.certificate_number"
            disabled
            clearable
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>

        <el-form-item
          v-if="examineData.number_type != 1"
          label="网络剧片发行许可证(原件)"
          prop="publish_license_image"
        >
          <Upload
            tip="建议图片大小不能超过2MB，支持jpg、jpeg、png格式"
            :url="examineData.publish_license_image"
          ></Upload>
        </el-form-item>
        <el-form-item
          label="剧目播放授权材料"
          prop="authorized_material_image"
        >
          <Upload
            tip="建议图片大小不能超过2MB，支持jpg、jpeg、png格式"
            :url="formData.authorized_material_image"
            @resultUpload="onUpLoadImage"
          ></Upload>
        </el-form-item>
        <!-- 新增选择提审剧集内容 -->
        <el-form-item
          label="提审剧集内容"
          prop="expedited"
        >
          <el-radio
            v-model="formData.examineApp"
            :label="1"
          >当前短剧最新内容</el-radio>
          <el-radio
            v-model="formData.examineApp"
            :label="2"
            @change="onChangeExamineApp"
          > 上次审核成功内容</el-radio>
        </el-form-item>
        <el-form-item
          v-if="formData.examineApp==2"
          label="上次审核成功的小程序"
          prop="passed_mini_app_id"
          class="lastExamineApp"
        >
          <el-select
            v-model="formData.passed_mini_app_id"
            clearable
            filterable
            remote
            style="width: 100%;"
            placeholder="请选择"
          >
            <el-option
              v-for="(item) in playletCheckList"
              :key="item.id"
              :label="item.name"
              :disabled="item.app_type==2"
              :value="item.id"
              style="display: flex; align-items: center;"
            >
              <span style="float: left;margin-right:10px;">{{ item.name }}</span>
              <svg-icon
                v-if="item.app_type==1"
                style="float: right;"
                icon-class="miniapp"
                class="imageIcon"
              />
              <svg-icon
                v-else
                style="float: right;"
                icon-class="douyin"
                class="imageIcon"
              />
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <span class="dialog-footer rowFlex">
        <el-button
          class="btn"
          @click="onclose"
        >取 消</el-button>
        <el-button
          class="btn"
          type="primary"
          :loading="loading"
          @click="onsubmit"
        >确 定</el-button>
      </span>
      <el-dialog
        title="提示"
        :visible.sync="setActorShow"
        width="30%"
        :append-to-body="true"
        :before-close="beforeClose"
      >
        <span>当前提审短剧归属合同剧未添加演员信息，请在合同剧，编辑中添加演员信息后再提审</span>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="onSetActor"
          >去添加</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Upload from '@/common/component/upload.vue'
import { getCheckInfo, contractPlayList, playletCheck } from '@/api/examine'
import { miniAppList } from '@/api/common'
import { checkedMiniApp } from '@/api/content'
export default {
  components: {
    Upload
  },
  props: {
    row: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      setActorShow: false,
      setActorId: '',
      playletCheckList: [],
      examineData: {
        title: '',
        publish_license_image: '',
        producer: '',
        number_type: '',
        certificate_number: ''
      },
      formData: {
        playlet_id: '',
        authorized_material_image: '',
        expedited: 1,
        mini_app_id: '',
        examineApp: 1,
        passed_mini_app_id: ''
      },
      rules: {
        playlet_id: [{ required: true, message: '请选择短剧', trigger: 'change' }],
        mini_app_id: [{ required: true, message: '请选择小程序', trigger: 'change' }],
        expedited: [{ required: true, message: '请选择提审类型', trigger: 'change' }],
        authorized_material_image: [{ required: true, message: '请选择图片', trigger: 'change' }]
      },
      optionsList: {
        playlet_id: [],
        mini_app_id: []
      }
    }
  },
  mounted() {
    this.getContractPlayList()
    this.onGetMiniAppList()
    if (this.row.id) {
      this.formData.playlet_id = Number(this.row.playlet_id)
      this.formData.mini_app_id = this.row.mini_app_id + ''
      this.row.passed_mini_app_id ? this.formData.examineApp = 2 : this.formData.examineApp = 1
      this.row.passed_mini_app_id ? this.formData.passed_mini_app_id = this.row.passed_mini_app_id + '' : this.formData.passed_mini_app_id = ''
      this.onGetCheckInfo(this.row.playlet_id)
    }
  },
  methods: {
    onChangeExamineApp() {
      if (!this.formData.playlet_id) {
        this.$message.warning('请先选择合同剧或者版本剧')
        this.formData.examineApp
      } else {

      }
    },
    async checkedMiniApp() {
      const res = await checkedMiniApp({ playlet_id: this.formData.playlet_id })
      if (res.data.length > 0) {
        this.playletCheckList = res.data
      } else {
        this.playletCheckList = []
      }
    },
    beforeClose() {
      this.setActorShow = false
    },
    onSetActor() {
      this.$router.push({
        path: '/content/index',
        query: {
          type: 'setActor',
          id: this.setActorId
        }
      })
    },
    async onGetMiniAppList() {
      const res = await miniAppList()
      if (res.status_code == 1) {
        this.optionsList.mini_app_id = res.data.filter((item) => item.app_type == 1)
      }
    },
    async getContractPlayList() {
      const res = await contractPlayList()
      if (res.status_code === 1) {
        this.optionsList.playlet_id = res.data
      }
    },
    async onGetCheckInfo(id) {
      if (id) {
        const res = await getCheckInfo({ playlet_id: id || this.formData.playlet_id })
        if (res.status_code === 1) {
          this.examineData = res.data
        }
        this.checkedMiniApp()
      }
    },
    async onPlayletCheck() {
      this.loading = true
      const formData = JSON.parse(JSON.stringify(this.formData))
      formData.examineApp === 1 ? formData.passed_mini_app_id = '' : ''
      delete formData.examineApp
      const data = {
        ...formData,
        app_type: 1
      }
      const res = await playletCheck(data)
      if (res.status_code === 1) {
        this.$message.success(res.msg)
        this.$emit('ok')
      } else if (res.status_code === -101) {
        this.setActorShow = true
        this.setActorId = res.msg
      }
      this.loading = false
    },
    onsubmit() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.onPlayletCheck()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onclose() {
      this.$emit('cancel')
    },
    onUpLoadImage(url, type) {
      this.formData.authorized_material_image = url
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 58px);
  position: relative;
  padding-bottom: 100px;
  .formData {
    padding: 20px 20px 0 20px;
    position: relative;
  }
  .contentMain{
    height: 100%;
    overflow: auto;
    padding-bottom: 100px;
  }
}
.lastExamineApp{
  padding: 16px;
  padding-top: 10px;
  background: #F7F8FA;
  border-radius: 4px;
  margin-top: -15px;
  padding-bottom: 30px;
}
::v-deep.el-form--label-top .el-form-item__label {
  padding-bottom: 0 !important;
  font-weight: 500;
}
::v-deep.avatar-uploader {
  display: flex !important;
}
</style>
<style lang="scss">
// .dialog-footer {
//   position: relative;
// }
</style>